<template>
  <el-form
    ref="userForm"
    :model="userInfo"
    label-width="120px"
    style="margin-left: 120px; margin-top: 30px"
    :rules="rules"
  >
    <el-form-item label="姓名:" prop="username">
      <el-input v-model="userInfo.username" style="width:300px" />
    </el-form-item>
    <el-form-item label="密码:" prop="password">
      <el-input v-model="userInfo.password" type="password" style="width:300px" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="updateFn">更新</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 引入统一的请求文件
import { getUserDetailByIdApi, saveUserDetailByIdApi } from '@/api'
export default {
  data() {
    return {
      userInfo: { // 表单双向绑定
        username: '',
        password: ''
      },
      rules: { // 表单校验
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 1, max: 6, message: '用户名长度1-6字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 40, message: '密码长度6-40字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() { // 在页面创建时就需要根据传递过来的员工id发起请求
    this.getUserDetailById()
  },
  methods: {
    async getUserDetailById() { // 根据id获取员工详情请求函数
      try {
        const res = await getUserDetailByIdApi(this.$route.query.id)
        // 表单数据回填
        this.userInfo = res.data // 为什么要将所有的数据都赋值给双向绑定的表单,因为后台的文档需要这些信息,即使我们只修改了用户名和密码
      } catch (err) {
        console.dir(err)
      }
    },
    async saveUserDetailById() { // 根据id更新员工信息请求函数
      try {
        await saveUserDetailByIdApi(this.userInfo)
        this.$message({ // 给用户一个提示
          type: 'success',
          message: '修改成功!'
        })
      } catch (err) {
        console.dir(err)
        this.$message({ // 给用户一个提示
          type: 'danger',
          message: '修改失败!'
        })
      }
    },
    updateFn() { // 点击更新触发的事件
      // 兜底验证
      this.$refs.userForm.validate(valid => {
        if (valid) {
          // 发起用户信息更新请求
          this.saveUserDetailById()
        }
      })
    }
  }
}
</script>

